<template>
	<div class="app-container">
		<el-tabs v-model="activeTab" size="mini">
			<el-tab-pane label="BPM" name="bpmTab">
				<BaseAlarmListBPM></BaseAlarmListBPM>
			</el-tab-pane>
			<el-tab-pane label="NPM" name="apmTab">
				<BaseAlarmListNPM></BaseAlarmListNPM>
			</el-tab-pane>
		</el-tabs>
		<download-panel></download-panel>
	</div>
</template>

<script setup name="BaseAlarmList" lang="ts">
import { useRoute } from 'vue-router';
import { ref, onMounted } from 'vue';
import BaseAlarmListBPM from './base-alarm/base_alarm_list_bpm.vue';
import BaseAlarmListNPM from './base-alarm/base_alarm_list_apm.vue';
import DownloadPanel from '@/components/DownloadPanel/index.vue';

const route = useRoute();
const activeTab = ref('bpmTab');
onMounted(() => {
	let data;
	try {
		data = JSON.parse(route.query?.data as string);
	} catch (e) {
		data = route.query;
	}
	if (data.category === 'NPM') {
		activeTab.value = 'apmTab';
	} else {
		activeTab.value = 'bpmTab';
	}
});
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
/*整个tab选中样式*/
:deep(.el-tabs__active-bar) {
	height: 6px;
	background-color: transparent;
	background-image: url('@/assets/images/tabs-triangle.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 10px 100%;
	position: absolute;
	bottom: 0;
	left: 0;
}

/*整个tab左对齐*/
:deep(.el-tabs__nav) {
	margin-left: 30px;
}

/*整个tab靠上*/
:deep(.el-tabs__nav-scroll) {
	margin-top: -10px;
}

/*tab文字样式设置白色*/
:deep(.el-tabs__item) {
	color: white;
}

/*tab文字在选中时颜色*/
:deep(.el-tabs__item.is-active) {
	color: #00fefe;
}

/*tab下面的线的颜色*/
:deep(.el-tabs__nav-wrap::after) {
	background-color: #00fefe;
	z-index: 0;
}

.relvanceDataIdClass {
	margin-bottom: 10px;
	color: #2beded;
}
</style>
